<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>添加房源</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/nprogress.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
<link rel="shortcut icon" href="images/icon/favicon.ico">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/nprogress.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
  <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="/js/login.js"></script>
  <script src="/js/tenant.js"></script>
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      height: 178px;
      display: block;
    }
    input[type=file]{
      display: none;
    }
    .msg{
      color: red;
    }
  </style>
</head>

<body class="user-select">
<div id="app">
  <mymain ref="mym" @logined="onlogin">
    <el-form ref="form" :model="house" label-width="80px">
      <el-form-item label="地址">
        <el-input  v-model="house.address" :editable="false" style="width: 300px"></el-input>
        <span class="msg">{{errors.address}}</span>
      </el-form-item>
    <el-form-item label="价格">
        <el-input  v-model="house.price" style="width: 300px"></el-input> 元/月
      <span class="msg">{{errors.price}}</span>
    </el-form-item>
      <el-form-item label="规模">
        <el-input  v-model="house.scale" style="width: 300px"></el-input>
      <span class="msg">{{errors.scale}}</span>
    </el-form-item>
    <el-form-item label="图片">
        <el-upload style="width: 300px;display: inline"
                action="uploadFile"
                list-type="picture-card"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                multiple
        >
          <i class="el-icon-plus"></i>
        </el-upload><span class="msg">{{errors.imgUrls}}</span>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form-item>
    <el-form-item label="介绍">
      <span class="msg">{{errors.introduce}}</span>
        <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="house.introduce">
        </el-input>
    </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </mymain>
</div>
<script>
  var v=new Vue({
    el:"#app",
    data:{
      dialogImageUrl: '',
      dialogVisible: false,
      house:{address:"",price:"",scale:"",introduce:"",imgUrls:[]},
      errors:{}
    },
    methods:{
      onSubmit(){

        axios.post("/house/save",this.house).then(res=>{
          if (res.data.code){
            this.$message(res.data.msg);
            window.location.href="/";
          }else {
            this.errors={};
            for (var name in this.house){
              var  errMsg=res.data.data.filter(err=> err.field==name)
                      .map(err=>err.defaultMessage).join(",");
              this.errors[name]=errMsg;
            }
          }
        })
      },
      onlogin(user){
        this.article.author=user.name;
        this.$forceUpdate();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleAvatarSuccess(res, file) {
        if (res.code){
          this.house.imgUrls.push(res.data);
        }else {
          this.$alert(res.msg);
        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type.indexOf('image')==0;
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能图片格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  });
</script>

<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.ias.js"></script> 
<script src="js/scripts.js"></script>
</body>
</html>